<script setup>
import { ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElButton, ElCheckbox } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'

const { t } = useI18n()

const form = ref({
  username: '',
  password: '',
  check_password: '',
  code: '',
  iAgree: false
})

const loading = ref(false)

const getCodeTime = ref(60)
const getCodeLoading = ref(false)
let timer = null

const getCode = () => {
  if (getCodeLoading.value) return
  getCodeLoading.value = true
  timer = setInterval(() => {
    getCodeTime.value--
    if (getCodeTime.value <= 0) {
      clearInterval(timer)
      getCodeTime.value = 60
      getCodeLoading.value = false
    }
  }, 1000)
}

const rules = {
  username: [{ required: true, message: t('login.username') + ' ' + t('common.required'), trigger: 'blur' }],
  password: [{ required: true, message: t('login.password') + ' ' + t('common.required'), trigger: 'blur' }],
  check_password: [
    { required: true, message: t('login.checkPassword') + ' ' + t('common.required'), trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.value.password) {
          callback(new Error(t('login.passwordMismatch')))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  code: [{ required: true, message: t('login.code') + ' ' + t('common.required'), trigger: 'blur' }],
  iAgree: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请同意用户协议'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ]
}

const formRef = ref(null)

const emit = defineEmits(['to-login'])

const loginRegister = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      // 模拟异步请求
      setTimeout(() => {
        loading.value = false
        emit('to-login')
      }, 1000)
    }
  })
}

const toLogin = () => {
  emit('to-login')
}
</script>

<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-position="top"
    size="large"
    class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
  >
    <h2 class="text-2xl font-bold text-center mb-6">{{ t('login.register') }}</h2>

    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" placeholder="请输入用户名" />
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input
        v-model="form.password"
        placeholder="请输入密码"
        show-password
      />
    </el-form-item>

    <el-form-item label="确认密码" prop="check_password">
      <el-input
        v-model="form.check_password"
        placeholder="请确认密码"
        show-password
      />
    </el-form-item>

    <el-form-item label="验证码" prop="code">
      <div class="flex">
        <el-input v-model="form.code" placeholder="请输入验证码" />
        <el-button
          type="primary"
          :disabled="getCodeLoading"
          class="ml-2"
          @click="getCode"
        >
          获取验证码
          <span v-if="getCodeLoading">({{ getCodeTime }})</span>
        </el-button>
      </div>
    </el-form-item>

    <el-form-item prop="iAgree">
      <el-checkbox v-model="form.iAgree">
        我同意
        <a
          href="https://element-plus.org/"
          target="_blank"
          class="text-primary underline"
          >《用户协议》</a
        >
      </el-checkbox>
    </el-form-item>

    <el-form-item>
      <el-button
        type="primary"
        :loading="loading"
        class="w-full"
        @click="loginRegister"
      >
        注册
      </el-button>
    </el-form-item>

    <el-form-item>
      <el-button class="w-full" @click="toLogin">已有账号，去登录</el-button>
    </el-form-item>
  </el-form>
</template>
